<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点火线圈成本计算工具</title>
    <!-- 使用本地ExcelJS库和FileSaver.js -->
    <script src="exceljs.js"></script>
    <script src="FileSaver.min.js"></script>
    <!-- 引入CSS和JavaScript文件 -->
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>宁波永诚汽车电器有限公司</h1>
            <h2>点火线圈成本计算工具</h2>
            <div class="version-tag"><span>V2.0</span></div>
        </header>

        <!-- 基本信息输入 -->
        <section>
            <div class="section-title">
                <div class="section-number">1</div>
                <h2>基本信息</h2>
            </div>
            <div class="form-group-row">
                <div class="form-group">
                    <label for="oeNumber">OE号</label>
                    <input type="text" id="oeNumber" placeholder="请输入OE号">
                </div>
                <div class="form-group">
                    <label for="internalNumber">公司内部编号</label>
                    <input type="text" id="internalNumber" placeholder="请输入公司内部编号">
                </div>
            </div>
            <div class="form-group">
                <label for="productImage">产品图片 (可多选或粘贴)</label>
                <div class="file-upload-box">
                    <input type="file" id="productImage" accept="image/*" multiple>
                    <div class="paste-hint">也可以直接按Ctrl+V粘贴剪贴板中的图片</div>
                    <div id="imagePreview" class="image-preview"></div>
                </div>
            </div>
        </section>

        <!-- BOM物料成本 -->
        <section>
            <div class="section-title">
                <div class="section-number">2</div>
                <h2>BOM物料成本</h2>
            </div>
            
            <!-- 塑料件 -->
            <div class="sub-section">
                <h3><span class="section-icon">🧩</span>塑料件</h3>
                <div class="toggle-container">
                    <label class="toggle-label">计算方式：</label>
                    <div class="toggle-switch">
                        <input type="radio" id="plasticDetailedMode" name="plasticCalcMode" value="detailed" checked>
                        <label for="plasticDetailedMode">分项计算</label>
                        <input type="radio" id="plasticBulkMode" name="plasticCalcMode" value="bulk">
                        <label for="plasticBulkMode">整体采购</label>
                    </div>
                </div>
                
                <!-- 分项计算模式 -->
                <div id="plasticDetailedSection" class="card-container">
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="outerShellCheck" checked>
                            <label for="outerShellCheck">外壳</label>
                        </div>
                        <div class="card-body" id="outerShellForm">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="outerShellWeight">重量(g)</label>
                                    <input type="number" id="outerShellWeight" step="0.01" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="outerShellUnitPrice">单价(¥/Kg)</label>
                                    <input type="number" id="outerShellUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="outerShellCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="outerShellCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="highVoltageCheck" checked>
                            <label for="highVoltageCheck">高压骨架</label>
                        </div>
                        <div class="card-body" id="highVoltageForm">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="highVoltageWeight">重量(g)</label>
                                    <input type="number" id="highVoltageWeight" step="0.01" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="highVoltageUnitPrice">单价(¥/Kg)</label>
                                    <input type="number" id="highVoltageUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="highVoltageCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="highVoltageCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="lowVoltageCheck" checked>
                            <label for="lowVoltageCheck">低压骨架</label>
                        </div>
                        <div class="card-body" id="lowVoltageForm">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="lowVoltageWeight">重量(g)</label>
                                    <input type="number" id="lowVoltageWeight" step="0.01" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="lowVoltageUnitPrice">单价(¥/Kg)</label>
                                    <input type="number" id="lowVoltageUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="lowVoltageCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="lowVoltageCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="customPlasticCheck">
                            <label for="customPlasticCheck">自定义配件</label>
                        </div>
                        <div class="card-body" id="customPlasticForm" style="display: none;">
                            <div class="form-group">
                                <label for="customPlasticName">配件名称</label>
                                <input type="text" id="customPlasticName" placeholder="请输入配件名称">
                            </div>
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="customPlasticWeight">重量(g)</label>
                                    <input type="number" id="customPlasticWeight" step="0.01" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="customPlasticUnitPrice">单价(¥/Kg)</label>
                                    <input type="number" id="customPlasticUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="customPlasticCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="customPlasticCost" value="0">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 整体采购模式 -->
                <div id="plasticBulkSection" class="form-group" style="display: none;">
                    <div class="form-group">
                    <label for="plasticBulkPrice">塑料件整体采购价格(¥)</label>
                    <input type="number" id="plasticBulkPrice" step="0.01" min="0" value="0">
                    </div>
                    <div class="form-group">
                        <label for="plasticBulkSpec">规格 (选填)</label>
                        <input type="text" id="plasticBulkSpec" placeholder="请输入规格信息">
                    </div>
                    <div class="form-group">
                        <label for="plasticBulkSupplier">供应商 (选填)</label>
                        <input type="text" id="plasticBulkSupplier" placeholder="请输入供应商名称">
                    </div>
                </div>
                
                <!-- 塑料件总计 -->
                <div class="sub-section-total">
                    <div class="total-label">塑料件总计：</div>
                    <div class="total-value" id="plasticTotalDisplay">0.00 ¥</div>
                    <input type="hidden" id="plasticTotal" value="0">
                </div>
            </div>
            
            <!-- 铜线 -->
            <div class="sub-section">
                <h3><span class="section-icon">🧶</span>铜线</h3>
                
                <div class="card-container">
                    <!-- 铜价输入卡片 -->
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="copperBasePriceCheck" checked>
                            <label for="copperBasePriceCheck">铜基础价格</label>
                        </div>
                        <div class="card-body" id="copperBasePriceForm">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="copperBasePrice">当前铜基础价格(¥/Kg)</label>
                                    <input type="number" id="copperBasePrice" step="0.01" min="0" value="0" placeholder="请输入当前铜价">
                                </div>
                                <div class="form-group">
                                    <a href="https://www.ccmn.cn/priceinfo/cu/" target="_blank" title="前往长江有色金属网查询铜价" class="copper-price-link">
                                        <span class="link-icon">🔍</span>
                                        <span class="link-text">查询铜价</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 加工费表格和参考 -->
                    <div class="processing-fee-reference">
                        <h4>加工费参考表(¥/Kg)</h4>
                        <div class="processing-fee-table-container">
                            <table class="processing-fee-table">
                                <thead>
                                    <tr>
                                        <th>规格(mm)</th>
                                        <th>QA-1/180(¥/Kg)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr><td>0.030</td><td>-</td></tr>
                                    <tr><td>0.035</td><td>-</td></tr>
                                    <tr><td>0.038</td><td>-</td></tr>
                                    <tr><td>0.040</td><td>40.00</td></tr>
                                    <tr><td>0.045</td><td>30.00</td></tr>
                                    <tr><td>0.048-0.050</td><td>22.00</td></tr>
                                    <tr><td>0.055</td><td>20.00</td></tr>
                                    <tr><td>0.060</td><td>18.00</td></tr>
                                    <tr><td>0.065</td><td>17.00</td></tr>
                                    <tr><td>0.068</td><td>-</td></tr>
                                    <tr><td>0.070</td><td>16.00</td></tr>
                                    <tr><td>0.075</td><td>-</td></tr>
                                    <tr><td>0.080</td><td>14.00</td></tr>
                                    <tr><td>0.085</td><td>-</td></tr>
                                    <tr><td>0.090</td><td>13.00</td></tr>
                                    <tr><td>0.095</td><td>-</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <p class="table-note">注：加工费含税价，参考表来源于浙江技鸣电工器材有限公司 2025年4月（原表单位为元/吨，此处已转换为元/Kg）</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="highVoltageWireCheck" checked>
                            <label for="highVoltageWireCheck">高压铜线</label>
                        </div>
                        <div class="card-body" id="highVoltageWireForm">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="highVoltageWireWeight">重量(g)</label>
                                    <input type="number" id="highVoltageWireWeight" step="0.01" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="highVoltageWireDiameter">线径(mm)</label>
                                    <input type="number" id="highVoltageWireDiameter" step="0.001" min="0" value="0" placeholder="如：0.070">
                                </div>
                            </div>
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="highVoltageWireProcessingFee">加工费(¥/Kg)</label>
                                    <input type="number" id="highVoltageWireProcessingFee" step="0.01" min="0" value="0" placeholder="请输入加工费">
                                </div>
                                <div class="form-group">
                                    <button type="button" id="calculateHighVoltageWirePrice" class="wire-calc-button">计算单价</button>
                                </div>
                            </div>
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="highVoltageWireUnitPrice">最终单价(¥/Kg)</label>
                                    <input type="number" id="highVoltageWireUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="highVoltageWireCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="highVoltageWireCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="lowVoltageWireCheck" checked>
                            <label for="lowVoltageWireCheck">低压铜线</label>
                        </div>
                        <div class="card-body" id="lowVoltageWireForm">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="lowVoltageWireWeight">重量(g)</label>
                                    <input type="number" id="lowVoltageWireWeight" step="0.01" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="lowVoltageWireDiameter">线径(mm)</label>
                                    <input type="number" id="lowVoltageWireDiameter" step="0.001" min="0" value="0" placeholder="如：0.070">
                                </div>
                            </div>
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="lowVoltageWireProcessingFee">加工费(¥/Kg)</label>
                                    <input type="number" id="lowVoltageWireProcessingFee" step="0.01" min="0" value="0" placeholder="请输入加工费">
                                </div>
                                <div class="form-group">
                                    <button type="button" id="calculateLowVoltageWirePrice" class="wire-calc-button">计算单价</button>
                                </div>
                            </div>
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="lowVoltageWireUnitPrice">最终单价(¥/Kg)</label>
                                    <input type="number" id="lowVoltageWireUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="lowVoltageWireCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="lowVoltageWireCost" value="0">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 铜线总计 -->
                <div class="sub-section-total">
                    <div class="total-label">铜线总计：</div>
                    <div class="total-value" id="wireTotalDisplay">0.00 ¥</div>
                    <input type="hidden" id="wireTotal" value="0">
                </div>
            </div>
            
            <!-- 铁芯 -->
            <div class="sub-section">
                <h3><span class="section-icon">⚙️</span>铁芯</h3>
                <div class="card-container">
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="ironCoreCheck">
                            <label for="ironCoreCheck">铁芯</label>
                        </div>
                        <div class="card-body" id="ironCoreForm" style="display: none;">
                            <div class="form-group">
                                <label for="ironCorePrice">单价(¥/个)</label>
                                <input type="number" id="ironCorePrice" step="0.01" min="0" value="0">
                            </div>
                            <div class="form-group">
                                <label for="ironCoreSpec">规格 (选填)</label>
                                <input type="text" id="ironCoreSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="ironCoreSupplier">供应商 (选填)</label>
                                <input type="text" id="ironCoreSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="ironCoreCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="ironCoreCost" value="0">
                            </div>
                    </div>
                </div>
                
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="ironSleeveCheck">
                            <label for="ironSleeveCheck">铁套</label>
                        </div>
                        <div class="card-body" id="ironSleeveForm" style="display: none;">
                    <div class="form-group">
                                <label for="ironSleevePrice">单价(¥/个)</label>
                                <input type="number" id="ironSleevePrice" step="0.01" min="0" value="0">
                    </div>
                    <div class="form-group">
                                <label for="ironSleeveSpec">规格 (选填)</label>
                                <input type="text" id="ironSleeveSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="ironSleeveSupplier">供应商 (选填)</label>
                                <input type="text" id="ironSleeveSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="ironSleeveCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="ironSleeveCost" value="0">
                            </div>
                    </div>
                </div>
                
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="magnetCheck">
                            <label for="magnetCheck">磁铁</label>
                        </div>
                        <div class="card-body" id="magnetForm" style="display: none;">
                    <div class="form-group">
                                <label for="magnetPrice">单价(¥/个)</label>
                                <input type="number" id="magnetPrice" step="0.01" min="0" value="0">
                            </div>
                            <div class="form-group">
                                <label for="magnetSpec">规格 (选填)</label>
                                <input type="text" id="magnetSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="magnetSupplier">供应商 (选填)</label>
                                <input type="text" id="magnetSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="magnetCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="magnetCost" value="0">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 铁芯总计 -->
                <div class="sub-section-total">
                    <div class="total-label">铁芯总计：</div>
                    <div class="total-value" id="coreTotalDisplay">0.00 ¥</div>
                    <input type="hidden" id="coreTotal" value="0">
                </div>
            </div>
            
            <!-- 模块 -->
            <div class="sub-section">
                <h3><span class="section-icon">🔌</span>点火模块</h3>
                <div class="card-container" id="moduleContainer">
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="moduleCheck">
                            <label for="moduleCheck">点火模块</label>
                        </div>
                        <div class="card-body" id="moduleForm" style="display: none;">
                            <div class="form-group">
                                <label for="modulePrice">单价(¥/个)</label>
                                <input type="number" id="modulePrice" step="0.01" min="0" value="0">
                            </div>
                            <div class="form-group">
                                <label for="moduleSpec">规格 (选填)</label>
                                <input type="text" id="moduleSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="moduleSupplier">供应商 (选填)</label>
                                <input type="text" id="moduleSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="moduleCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="moduleCost" value="0">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 模块总计 -->
                <div class="sub-section-total">
                    <div class="total-label">模块总计：</div>
                    <div class="total-value" id="moduleTotalDisplay">0.00 ¥</div>
                    <input type="hidden" id="moduleTotal" value="0">
                </div>
            </div>
            
            <!-- 配件 -->
            <div class="sub-section">
                <h3><span class="section-icon">🔩</span>配件</h3>
                <div class="card-container">
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="screwCheck">
                            <label for="screwCheck">螺丝</label>
                        </div>
                        <div class="card-body" id="screwForm" style="display: none;">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="screwQuantity">数量(个)</label>
                                    <input type="number" id="screwQuantity" step="1" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="screwUnitPrice">单价(¥/个)</label>
                                    <input type="number" id="screwUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="screwSpec">规格 (选填)</label>
                                <input type="text" id="screwSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="screwSupplier">供应商 (选填)</label>
                                <input type="text" id="screwSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="screwCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="screwCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="nutCheck">
                            <label for="nutCheck">螺帽</label>
                        </div>
                        <div class="card-body" id="nutForm" style="display: none;">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="nutQuantity">数量(个)</label>
                                    <input type="number" id="nutQuantity" step="1" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="nutUnitPrice">单价(¥/个)</label>
                                    <input type="number" id="nutUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="nutSpec">规格 (选填)</label>
                                <input type="text" id="nutSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="nutSupplier">供应商 (选填)</label>
                                <input type="text" id="nutSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="nutCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="nutCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="hvRodCheck">
                            <label for="hvRodCheck">高压杆</label>
                        </div>
                        <div class="card-body" id="hvRodForm" style="display: none;">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="hvRodQuantity">数量(个)</label>
                                    <input type="number" id="hvRodQuantity" step="1" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="hvRodUnitPrice">单价(¥/个)</label>
                                    <input type="number" id="hvRodUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="hvRodSpec">规格 (选填)</label>
                                <input type="text" id="hvRodSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="hvRodSupplier">供应商 (选填)</label>
                                <input type="text" id="hvRodSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="hvRodCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="hvRodCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="rubberCheck">
                            <label for="rubberCheck">橡胶件（带弹簧）</label>
                        </div>
                        <div class="card-body" id="rubberForm" style="display: none;">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="rubberQuantity">数量(个)</label>
                                    <input type="number" id="rubberQuantity" step="1" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="rubberUnitPrice">单价(¥/个)</label>
                                    <input type="number" id="rubberUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="rubberSpec">规格 (选填)</label>
                                <input type="text" id="rubberSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="rubberSupplier">供应商 (选填)</label>
                                <input type="text" id="rubberSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="rubberCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="rubberCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="siliconePadCheck">
                            <label for="siliconePadCheck">硅胶垫片</label>
                        </div>
                        <div class="card-body" id="siliconePadForm" style="display: none;">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="siliconePadQuantity">数量(个)</label>
                                    <input type="number" id="siliconePadQuantity" step="1" min="0" value="1">
                                </div>
                                <div class="form-group">
                                    <label for="siliconePadUnitPrice">单价(¥/个)</label>
                                    <input type="number" id="siliconePadUnitPrice" step="0.001" min="0" value="0.022">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="siliconePadSpec">规格 (选填)</label>
                                <input type="text" id="siliconePadSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="siliconePadSupplier">供应商 (选填)</label>
                                <input type="text" id="siliconePadSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="siliconePadCostDisplay">0.02 ¥</span>
                                <input type="hidden" id="siliconePadCost" value="0.022">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="customPartCheck">
                            <label for="customPartCheck">自定义配件</label>
                        </div>
                        <div class="card-body" id="customPartForm" style="display: none;">
                            <div class="form-group">
                                <label for="customPartName">配件名称</label>
                                <input type="text" id="customPartName" placeholder="请输入配件名称">
                            </div>
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="customPartQuantity">数量(个)</label>
                                    <input type="number" id="customPartQuantity" step="1" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="customPartUnitPrice">单价(¥/个)</label>
                                    <input type="number" id="customPartUnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="customPartSpec">规格 (选填)</label>
                                <input type="text" id="customPartSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="customPartSupplier">供应商 (选填)</label>
                                <input type="text" id="customPartSupplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="customPartCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="customPartCost" value="0">
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="customPart2Check">
                            <label for="customPart2Check">自定义配件2</label>
                        </div>
                        <div class="card-body" id="customPart2Form" style="display: none;">
                            <div class="form-group">
                                <label for="customPart2Name">配件名称</label>
                                <input type="text" id="customPart2Name" placeholder="请输入配件名称">
                            </div>
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="customPart2Quantity">数量(个)</label>
                                    <input type="number" id="customPart2Quantity" step="1" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="customPart2UnitPrice">单价(¥/个)</label>
                                    <input type="number" id="customPart2UnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="customPart2Spec">规格 (选填)</label>
                                <input type="text" id="customPart2Spec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="customPart2Supplier">供应商 (选填)</label>
                                <input type="text" id="customPart2Supplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="customPart2CostDisplay">0.00 ¥</span>
                                <input type="hidden" id="customPart2Cost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="customPart3Check">
                            <label for="customPart3Check">自定义配件3</label>
                        </div>
                        <div class="card-body" id="customPart3Form" style="display: none;">
                            <div class="form-group">
                                <label for="customPart3Name">配件名称</label>
                                <input type="text" id="customPart3Name" placeholder="请输入配件名称">
                            </div>
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="customPart3Quantity">数量(个)</label>
                                    <input type="number" id="customPart3Quantity" step="1" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="customPart3UnitPrice">单价(¥/个)</label>
                                    <input type="number" id="customPart3UnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="customPart3Spec">规格 (选填)</label>
                                <input type="text" id="customPart3Spec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="customPart3Supplier">供应商 (选填)</label>
                                <input type="text" id="customPart3Supplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="customPart3CostDisplay">0.00 ¥</span>
                                <input type="hidden" id="customPart3Cost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="customPart4Check">
                            <label for="customPart4Check">自定义配件4</label>
                        </div>
                        <div class="card-body" id="customPart4Form" style="display: none;">
                            <div class="form-group">
                                <label for="customPart4Name">配件名称</label>
                                <input type="text" id="customPart4Name" placeholder="请输入配件名称">
                            </div>
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="customPart4Quantity">数量(个)</label>
                                    <input type="number" id="customPart4Quantity" step="1" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="customPart4UnitPrice">单价(¥/个)</label>
                                    <input type="number" id="customPart4UnitPrice" step="0.01" min="0" value="0">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="customPart4Spec">规格 (选填)</label>
                                <input type="text" id="customPart4Spec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group">
                                <label for="customPart4Supplier">供应商 (选填)</label>
                                <input type="text" id="customPart4Supplier" placeholder="请输入供应商名称">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="customPart4CostDisplay">0.00 ¥</span>
                                <input type="hidden" id="customPart4Cost" value="0">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 配件总计 -->
                <div class="sub-section-total">
                    <div class="total-label">配件总计：</div>
                    <div class="total-value" id="partsTotalDisplay">0.00 ¥</div>
                    <input type="hidden" id="partsTotal" value="0">
                </div>
            </div>
            
            <!-- 环氧树脂 -->
            <div class="sub-section">
                <h3><span class="section-icon">💧</span>环氧树脂</h3>
                <div class="form-group-row">
                    <div class="form-group">
                        <label for="resinWeight">重量(g)</label>
                        <input type="number" id="resinWeight" step="0.01" min="0" value="0">
                    </div>
                    <div class="form-group">
                        <label for="resinUnitPrice">单价(¥/Kg)</label>
                        <input type="number" id="resinUnitPrice" step="0.01" min="0" value="0">
                    </div>
                </div>
                <div class="form-group">
                    <label for="resinSupplier">供应商 (选填)</label>
                    <input type="text" id="resinSupplier" placeholder="请输入供应商名称">
                </div>
                
                <!-- 环氧树脂总计 -->
                <div class="sub-section-total">
                    <div class="total-label">环氧树脂总计：</div>
                    <div class="total-value" id="resinTotalDisplay">0.00 ¥</div>
                    <input type="hidden" id="resinTotal" value="0">
                </div>
            </div>
            
            <!-- 包装 -->
            <div class="sub-section">
                <h3><span class="section-icon">📦</span>包装</h3>
                <div class="card-container">
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="bubbleBagCheck">
                            <label for="bubbleBagCheck">气泡袋</label>
                        </div>
                        <div class="card-body" id="bubbleBagForm" style="display: none;">
                            <div class="form-group">
                                <label for="bubbleBagPrice">单价(¥/个)</label>
                                <input type="number" id="bubbleBagPrice" step="0.01" min="0" value="0">
                            </div>
                            <div class="form-group">
                                <label for="bubbleBagSpec">规格 (选填)</label>
                                <input type="text" id="bubbleBagSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="bubbleBagCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="bubbleBagCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="innerBoxCheck">
                            <label for="innerBoxCheck">内盒</label>
                        </div>
                        <div class="card-body" id="innerBoxForm" style="display: none;">
                            <div class="form-group">
                                <label for="innerBoxPrice">单价(¥/个)</label>
                                <input type="number" id="innerBoxPrice" step="0.01" min="0" value="0">
                            </div>
                            <div class="form-group">
                                <label for="innerBoxSpec">规格 (选填)</label>
                                <input type="text" id="innerBoxSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="innerBoxCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="innerBoxCost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <input type="checkbox" id="outerBoxCheck">
                            <label for="outerBoxCheck">外箱</label>
                        </div>
                        <div class="card-body" id="outerBoxForm" style="display: none;">
                            <div class="form-group-row">
                                <div class="form-group">
                                    <label for="outerBoxPrice">单价(¥/个)</label>
                                    <input type="number" id="outerBoxPrice" step="0.01" min="0" value="0">
                                </div>
                                <div class="form-group">
                                    <label for="quantityPerBox">每箱数量(个)</label>
                                    <input type="number" id="quantityPerBox" step="1" min="1" value="1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="outerBoxSpec">规格 (选填)</label>
                                <input type="text" id="outerBoxSpec" placeholder="请输入规格信息">
                            </div>
                            <div class="form-group-row cost-display">
                                <span>成本：</span>
                                <span id="outerBoxCostDisplay">0.00 ¥</span>
                                <input type="hidden" id="outerBoxCost" value="0">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 包装总计 -->
                <div class="sub-section-total">
                    <div class="total-label">包装总计：</div>
                    <div class="total-value" id="packagingTotalDisplay">0.00 ¥</div>
                    <input type="hidden" id="packagingTotal" value="0">
                </div>
            </div>
            
            <!-- BOM总计 -->
            <div class="section-total">
                <div class="total-label">BOM物料总计：</div>
                <div class="total-value" id="bomTotalDisplay">0.00 ¥</div>
                <input type="hidden" id="bomTotal" value="0">
            </div>
        </section>

        <!-- 人工成本 -->
        <section>
            <div class="section-title">
                <div class="section-number">3</div>
                <h2>人工成本</h2>
            </div>
            <div class="sub-section">
                <h3><span class="section-icon">👷</span>生产工序</h3>
                
                <!-- 工序计算方式切换 -->
                <div class="toggle-container">
                    <label class="toggle-label">计算方式：</label>
                    <div class="toggle-switch">
                        <input type="radio" id="laborDetailedMode" name="laborCalcMode" value="detailed" checked>
                        <label for="laborDetailedMode">分项计算</label>
                        <input type="radio" id="laborBulkMode" name="laborCalcMode" value="bulk">
                        <label for="laborBulkMode">整体输入</label>
                    </div>
                </div>
                
                <!-- 分项计算模式 -->
                <div id="laborDetailedSection">
                    <!-- 大工工价全局设置 -->
                    <div class="form-group" style="margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 5px;">
                        <label for="hourlyRate" style="font-weight: bold; color: #333;">大工工价（¥/小时，含社保）：</label>
                        <input type="number" id="hourlyRate" class="form-control" placeholder="请输入大工工价" step="0.01" min="0" style="margin-top: 5px;">
                    </div>
                    
                    <div class="card-container" id="laborProcessContainer">
                        <div class="card draggable-card" data-process="injectionProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="injectionProcess">
                                <label for="injectionProcess">注塑</label>
                            </div>
                            <div class="card-body" id="injectionProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="injectionHours">1000个产品工时(小时)</label>
                                    <input type="number" id="injectionHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card draggable-card" data-process="highVoltageWindingProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="highVoltageWindingProcess">
                                <label for="highVoltageWindingProcess">高压绕线</label>
                            </div>
                            <div class="card-body" id="highVoltageWindingProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="highVoltageWindingHours">1000个产品工时(小时)</label>
                                    <input type="number" id="highVoltageWindingHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card draggable-card" data-process="lowVoltageWindingProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="lowVoltageWindingProcess">
                                <label for="lowVoltageWindingProcess">低压绕线</label>
                            </div>
                            <div class="card-body" id="lowVoltageWindingProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="lowVoltageWindingHours">1000个产品工时(小时)</label>
                                    <input type="number" id="lowVoltageWindingHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card draggable-card" data-process="tinningProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="tinningProcess">
                                <label for="tinningProcess">上锡</label>
                            </div>
                            <div class="card-body" id="tinningProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="tinningHours">1000个产品工时(小时)</label>
                                    <input type="number" id="tinningHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card draggable-card" data-process="weldingProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="weldingProcess">
                                <label for="weldingProcess">焊接</label>
                            </div>
                            <div class="card-body" id="weldingProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="weldingHours">1000个产品工时(小时)</label>
                                    <input type="number" id="weldingHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card draggable-card" data-process="inspectionProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="inspectionProcess">
                                <label for="inspectionProcess">检测</label>
                            </div>
                            <div class="card-body" id="inspectionProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="inspectionHours">1000个产品工时(小时)</label>
                                    <input type="number" id="inspectionHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card draggable-card" data-process="potProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="potProcess">
                                <label for="potProcess">灌胶</label>
                            </div>
                            <div class="card-body" id="potProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="potHours">1000个产品工时(小时)</label>
                                    <input type="number" id="potHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card draggable-card" data-process="assemblyProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="assemblyProcess">
                                <label for="assemblyProcess">组装</label>
                            </div>
                            <div class="card-body" id="assemblyProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="assemblyHours">1000个产品工时(小时)</label>
                                    <input type="number" id="assemblyHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card draggable-card" data-process="testingProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="testingProcess">
                                <label for="testingProcess">测试</label>
                            </div>
                            <div class="card-body" id="testingProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="testingHours">1000个产品工时(小时)</label>
                                    <input type="number" id="testingHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card draggable-card" data-process="packagingProcess">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="packagingProcess">
                                <label for="packagingProcess">包装</label>
                            </div>
                            <div class="card-body" id="packagingProcessForm" style="display: none;">
                                <div class="form-group">
                                    <label for="packagingHours">1000个产品工时(小时)</label>
                                    <input type="number" id="packagingHours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <!-- 自定义工序1 -->
                        <div class="card draggable-card" data-process="customProcess1">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="customProcess1">
                                <label for="customProcess1">自定义工序1</label>
                            </div>
                            <div class="card-body" id="customProcess1Form" style="display: none;">
                                <div class="form-group">
                                    <label for="customProcess1Name">工序名称</label>
                                    <input type="text" id="customProcess1Name" placeholder="请输入工序名称">
                                </div>
                                <div class="form-group">
                                    <label for="customProcess1Hours">1000个产品工时(小时)</label>
                                    <input type="number" id="customProcess1Hours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <!-- 自定义工序2 -->
                        <div class="card draggable-card" data-process="customProcess2">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="customProcess2">
                                <label for="customProcess2">自定义工序2</label>
                            </div>
                            <div class="card-body" id="customProcess2Form" style="display: none;">
                                <div class="form-group">
                                    <label for="customProcess2Name">工序名称</label>
                                    <input type="text" id="customProcess2Name" placeholder="请输入工序名称">
                                </div>
                                <div class="form-group">
                                    <label for="customProcess2Hours">1000个产品工时(小时)</label>
                                    <input type="number" id="customProcess2Hours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <!-- 自定义工序3 -->
                        <div class="card draggable-card" data-process="customProcess3">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="customProcess3">
                                <label for="customProcess3">自定义工序3</label>
                            </div>
                            <div class="card-body" id="customProcess3Form" style="display: none;">
                                <div class="form-group">
                                    <label for="customProcess3Name">工序名称</label>
                                    <input type="text" id="customProcess3Name" placeholder="请输入工序名称">
                                </div>
                                <div class="form-group">
                                    <label for="customProcess3Hours">1000个产品工时(小时)</label>
                                    <input type="number" id="customProcess3Hours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <!-- 自定义工序4 -->
                        <div class="card draggable-card" data-process="customProcess4">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="customProcess4">
                                <label for="customProcess4">自定义工序4</label>
                            </div>
                            <div class="card-body" id="customProcess4Form" style="display: none;">
                                <div class="form-group">
                                    <label for="customProcess4Name">工序名称</label>
                                    <input type="text" id="customProcess4Name" placeholder="请输入工序名称">
                                </div>
                                <div class="form-group">
                                    <label for="customProcess4Hours">1000个产品工时(小时)</label>
                                    <input type="number" id="customProcess4Hours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <!-- 自定义工序5 -->
                        <div class="card draggable-card" data-process="customProcess5">
                            <div class="card-header" draggable="true">
                                <span class="drag-handle">⋮⋮</span>
                                <input type="checkbox" id="customProcess5">
                                <label for="customProcess5">自定义工序5</label>
                            </div>
                            <div class="card-body" id="customProcess5Form" style="display: none;">
                                <div class="form-group">
                                    <label for="customProcess5Name">工序名称</label>
                                    <input type="text" id="customProcess5Name" placeholder="请输入工序名称">
                                </div>
                                <div class="form-group">
                                    <label for="customProcess5Hours">1000个产品工时(小时)</label>
                                    <input type="number" id="customProcess5Hours" step="0.01" min="0" value="0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 整体输入模式 -->
                <div id="laborBulkSection" class="form-group" style="display: none;">
                    <label for="laborBulkPrice">人工总成本(¥)</label>
                    <input type="number" id="laborBulkPrice" step="0.01" min="0" value="0">
                </div>
            </div>
            
            <!-- 人工总计 -->
            <div class="section-total">
                <div class="total-label">人工成本总计：</div>
                <div class="total-value" id="laborTotalDisplay">0.00 ¥</div>
                <input type="hidden" id="laborTotal" value="0">
            </div>
        </section>

        <!-- 管理费 -->
        <section>
            <div class="section-title">
                <div class="section-number">4</div>
                <h2>管理费</h2>
            </div>
            
            <div class="form-group">
                <label for="managementCost">管理费（¥/个）</label>
                <input type="number" id="managementCost" step="0.01" min="0" value="0" placeholder="请输入管理费">
                <div class="field-description">
                    管理费包括管理人员工资以及各类奖金
                </div>
            </div>
            
            <!-- 管理费总计 -->
            <div class="section-total">
                <div class="total-label">管理费总计：</div>
                <div class="total-value" id="managementTotalDisplay">0.00 ¥</div>
                <input type="hidden" id="managementTotal" value="0">
            </div>
        </section>

        <!-- 运输成本 -->
        <section>
            <div class="section-title">
                <div class="section-number">5</div>
                <h2>运输成本</h2>
            </div>
            <div class="sub-section">
                <h3><span class="section-icon">🚚</span>运输成本</h3>
                
                <!-- 计算方式切换 -->
                <div class="toggle-container">
                    <label class="toggle-label">计算方式：</label>
                    <div class="toggle-switch">
                        <input type="radio" id="transportDetailedMode" name="transportCalcMode" value="detailed">
                        <label for="transportDetailedMode">自动计算</label>
                        <input type="radio" id="transportBulkMode" name="transportCalcMode" value="bulk" checked>
                        <label for="transportBulkMode">直接输入</label>
                    </div>
                </div>
                
                <!-- 自动计算模式 -->
                <div id="transportDetailedSection" style="display: none;">
                    <div class="form-group-row">
                <div class="form-group">
                            <label for="productQuantity">产品数量(个)</label>
                            <input type="number" id="productQuantity" step="1" min="1" value="1">
                        </div>
                        <div class="form-group">
                            <label for="productWeight">单个产品重量(g)</label>
                            <input type="number" id="productWeight" step="0.1" min="0" value="0">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="destination">目的地</label>
                        <select id="destination">
                            <option value="">请选择省份</option>
                            <!-- 这里将通过JS生成选项 -->
                        </select>
                    </div>
                    
                    <!-- 运输价格参考表 -->
                    <div class="shipping-fee-reference">
                        <h4>运输价格参考表</h4>
                        <div class="shipping-fee-table-container">
                            <table class="shipping-fee-table">
                                <thead>
                                    <tr>
                                        <th>省份</th>
                                        <th>起价(¥)</th>
                                        <th>500kg以内(¥/kg)</th>
                                        <th>500kg-1000kg(¥/kg)</th>
                                        <th>1000kg以上(¥/kg)</th>
                                    </tr>
                                </thead>
                                <tbody id="shippingFeeTableBody">
                                    <!-- 这里将通过JS填充数据 -->
                                </tbody>
                            </table>
                        </div>
                        <p class="table-note">注：以上价格仅供参考，请以实际报价为准</p>
                    </div>
                    
                    <div class="form-group-row shipping-result">
                        <div class="result-item">
                            <span class="result-label">总重量：</span>
                            <span id="totalWeightDisplay">0.00 kg</span>
                        </div>
                        <div class="result-item">
                            <span class="result-label">单价：</span>
                            <span id="shippingUnitPriceDisplay">0.00 ¥/kg</span>
                        </div>
                        <div class="result-item">
                            <span class="result-label">总运费：</span>
                            <span id="totalShippingFeeDisplay">0.00 ¥</span>
                        </div>
                        <div class="result-item">
                            <span class="result-label">单个产品运费：</span>
                            <span id="perProductShippingFeeDisplay">0.00 ¥</span>
                        </div>
                    </div>
                </div>
                
                <!-- 直接输入模式 -->
                <div id="transportBulkSection" class="form-group" style="display: none;">
                    <label for="transportationCost">运输成本(¥)</label>
                    <input type="number" id="transportationCost" step="0.01" min="0" value="0">
                </div>
                
                <!-- 运输总计 -->
                <div class="sub-section-total">
                    <div class="total-label">运输总计（单个产品）：</div>
                    <div class="total-value" id="transportationTotalDisplay">0.00 ¥</div>
                    <input type="hidden" id="transportationTotal" value="0">
                </div>
            </div>
        </section>

        <!-- 水电费及设备折旧费 -->
        <section>
            <div class="section-title">
                <div class="section-number">6</div>
                <h2>水电费及设备折旧费</h2>
            </div>
            <div class="sub-section">
                <h3><span class="section-icon">⚡</span>其他成本</h3>
                <div class="form-group">
                    <label for="utilitiesAndDepreciation">水电费及设备折旧费(¥)</label>
                    <input type="number" id="utilitiesAndDepreciation" step="0.01" min="0" value="0" placeholder="请输入水电费及设备折旧费">
                </div>
                
                <!-- 水电费及设备折旧费总计 -->
                <div class="sub-section-total">
                    <div class="total-label">水电费及设备折旧费总计：</div>
                    <div class="total-value" id="utilitiesAndDepreciationTotalDisplay">0.00 ¥</div>
                    <input type="hidden" id="utilitiesAndDepreciationTotal" value="0">
                </div>
            </div>
        </section>

        <!-- 总成本 -->
        <section>
            <div class="section-title">
                <div class="section-number">6</div>
                <h2>总成本</h2>
            </div>
            <div class="cost-summary">
                <div class="summary-row">
                    <div class="summary-label">BOM物料成本：</div>
                    <div class="summary-value" id="bomTotalSummary">0.00 ¥</div>
                </div>
                <div class="summary-row">
                    <div class="summary-label">人工成本：</div>
                    <div class="summary-value" id="laborTotalSummary">0.00 ¥</div>
                </div>
                <div class="summary-row">
                    <div class="summary-label">管理费：</div>
                    <div class="summary-value" id="managementTotalSummary">0.00 ¥</div>
                </div>
                <div class="summary-row">
                    <div class="summary-label">运输成本：</div>
                    <div class="summary-value" id="transportationTotalSummary">0.00 ¥</div>
                </div>
                <div class="summary-row">
                    <div class="summary-label">水电费及设备折旧费：</div>
                    <div class="summary-value" id="utilitiesAndDepreciationTotalSummary">0.00 ¥</div>
                </div>
                <div class="summary-row total">
                    <div class="summary-label">总成本：</div>
                    <div class="summary-value" id="totalCostDisplay">0.00 ¥</div>
                    <input type="hidden" id="totalCost" value="0">
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="action-buttons">
                <button id="calculateButton" class="primary-button">计算成本</button>
                <button id="exportExcelButton" class="primary-button">
                    <span class="button-icon">📊</span>导出Excel
                </button>
                <button id="resetButton" class="secondary-button">重置</button>
            </div>
        </section>

        <!-- 成本明细 -->
        <section id="costDetail" style="display: none;">
            <div class="section-title">
                <div class="section-number">7</div>
                <h2>成本明细</h2>
            </div>
            <div class="tabs">
                <button class="tab-button active" data-tab="costSummary">成本汇总</button>
                <button class="tab-button" data-tab="bomDetail">BOM明细</button>
                <button class="tab-button" data-tab="laborDetail">人工明细</button>
            </div>
            <div class="tab-content">
                <div id="costSummary" class="tab-pane active">
                    <h3>成本汇总明细</h3>
                    <table id="costSummaryTable" class="detail-table">
                        <thead>
                            <tr>
                                <th>成本项目</th>
                                <th>金额(¥)</th>
                                <th>占比(%)</th>
                            </tr>
                        </thead>
                        <tbody id="costSummaryTableBody">
                            <!-- 动态生成 -->
                        </tbody>
                    </table>
                </div>
                <div id="bomDetail" class="tab-pane">
                    <h3>BOM成本明细</h3>
                    <table id="bomCostTable" class="detail-table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>物料名称</th>
                                <th>数量</th>
                                <th>单价(¥)</th>
                                <th>总价(¥)</th>
                                <th>供应商</th>
                                <th>规格</th>
                            </tr>
                        </thead>
                        <tbody id="bomCostTableBody">
                            <!-- 动态生成 -->
                        </tbody>
                    </table>
                </div>
                <div id="laborDetail" class="tab-pane">
                    <h3>人工成本明细</h3>
                    <table id="laborCostTable" class="detail-table">
                        <thead>
                            <tr>
                                <th>工序名称</th>
                                <th>1000个产品工时(小时)</th>
                                <th>大工工价(¥/小时，含社保)</th>
                                <th>单个产品人工成本(¥)</th>
                            </tr>
                        </thead>
                        <tbody id="laborCostTableBody">
                            <!-- 动态生成 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
    <script src="drag-functionality.js"></script>
</body>
</html> 